<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>申请奖学金页面</title>
    <link rel="stylesheet" type="text/css" href="../static/admin/layui2/css/layui.css"/>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header" style="background-image: linear-gradient(120deg, #131313,#4c4c4c);">
        <div class="layui-logo"><a href="student-main.html" style="color: #47b3ff;font-size: 25px;">学生主页</a></div>
        <!-- 头部区域 -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a class="layui-icon" href="guanliyuan-login.html">管理员登录</a></li>
            <li class="layui-nav-item"><a class="layui-icon layui-icon-logout" style="color: #ff3c00;font-size: 20px;text-align: center;" href="student-login.html">退出</a></li>
        </ul>
    </div>

    <div class="layui-side" style=" background-image: linear-gradient(120deg, #a7d3f2,#1E9FFF);">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree layui-bg-black"  lay-filter="test">
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-user" style="font-size: 24px; color: #1E9FFF; margin-right: 16px"></i> 信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="student-informationChange.html"><i class="layui-icon layui-icon-edit" style="font-size: 24px; color: #1E9FFF; margin-right: 16px"></i>基本信息修改</a></dd>
                        <dd><a href="student-mimaChange.html"><i class="layui-icon layui-icon-edit" style="font-size: 24px; color: #1E9FFF; margin-right: 16px"></i>修改密码</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-iteme">
                    <a class="" href="student-apply.html"><i class="layui-icon layui-icon-form" style="font-size: 24px; color: #1E9FFF; margin-right: 16px"></i>奖学金申请</a>
                </li>
                <li class="layui-nav-item layui-nav-iteme">
                    <a class="" href="letter-box.html"><i class="layui-icon layui-icon-notice" style="font-size: 24px; color: #1E9FFF; margin-right: 16px"></i>通知</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <div class="demoTable" style="margin-top: 10px;margin-left: 10px">
            <div class="layui-inline" >
                <input class="layui-input" name="id" id="demoReload" autocomplete="off">
            </div>
            <button id="searchBtn" class="layui-btn" data-type="reload" style="background-color: #1E9FFF"><i class="layui-icon layui-icon-search"></i></button>
        </div>
        <!-- 内容主体区域 -->
        <div class="layui-anim layui-anim-scale">
            <table class="layui-hide" lay-filter="test" id="demo">
                <!--<thead>
                <tr>
                    <th lay-data="{field: 'sid',title: '奖学金编号', width:120,sort: true}"></th>
                    <th lay-data="{field: 'aid',title: '赞助人编号', width:120,sort: true}"></th>
                    <th lay-data="{field: 'name',title: '名称', width:140}"></th>
                    <th lay-data="{field: 'startTime', title: '开始时间', width: 160,sort: true}"></th>
                    <th id="test2" ></th>
                    <th lay-data="{field:'state',title: '状态', width:90,templet: '#table-state' ,sort: true}"></th>
                    <th lay-data="{field:'money', title: '金额', width:100,sort: true}"></th>
                    <th lay-data="{field:'sum', title: '名额', width: 80}"></th>
                    <th lay-data="{field:'residue', title: '剩余', width: 80}"></th>
                    <th lay-data="{field:'applyNum', title: '申请人数', width: 100"></th>
                    <th lay-data="{field:'require', title: '要求', width:200}"></th>
                    <th lay-data="{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}"></th>
                </tr>
                </thead>-->
            </table>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="apply">申请</a>
            </script>
            <script type="text/html" id="table-state">
                {{#  if(d.state === 0){ }}
                <span style="color: #ff4528;">禁用</span>
                {{#  } else { }}
                启用
                {{#  } }}
            </script>
        </div>
    </div>

    <div class="layui-footer layui-bg-black">

    </div>
</div>
<script src="../static/admin/layui2/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'jquery', 'element'], function() {
        var laydate = layui.laydate //日期
        var util = layui.util//工具
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , $ =layui.jquery
            , element = layui.element //元素操作

        var str
        var t
        table.render({
            elem: '#demo'
            ,height: 600
            ,url: "/scholarship/showScholarship" //数据接口
            ,title: '奖学金信息'
            ,toolbar: 'default' //自定义工具栏
            ,defaultToolbar: ['filter','print','exports'] //这里在右边显示
            ,toolbar: '#tblToolBar'   //这里在左边显示，然后指定到模版id
            ,totalRow: false //开启合计行
            ,parseData:function(map) {//格式绑定后端传递过来的数据，我使用的是map对象，为了符合数据表格接受数据的样式，所以这么做的
                return {
                    "code":map["code"],
                    "msg":"",
                    "count":map["count"],
                    data:map["data"]//这个data才是表格所需要的数据，里面其实是一个list集合，存放的是n条数据记录。
                }
            },
            cols: [[ //表头
                { fixed: 'left'}
                ,{field: 'sid',title: '奖学金编号', width:120,sort: true}
                ,{field: 'aid',title: '赞助人编号', width:120,sort: true}
                ,{field: 'name',title: '名称', width:140}
                ,{field: 'startTime', title: '开始时间', width: 160,sort: true}
                ,{field: 'endTime', title: '结束时间', width: 160,sort: true,
                    templet: function (a) {
                            var endTime=new Date(a.endTime).getTime()
                                ,serverTime = new Date().getTime();
                            var key = 'key_' + a.sid;
                            util.countdown(endTime, serverTime, function(date, serverTime, timer){
                                t=date;
                            });
                            if(t[0]==0&&t[1]==0&&t[2]==0&&t[3]==0){
                                return `<label  id=${key} style="color: red;">已到期</label>`;
                            }else {
                                str = t[0] + '天' + t[1] + '时' +  t[2] + '分' + t[3] + '秒';
                                var html = `<label id=${key} style="color: blue;">${str}</label>`;
                                util.countdown(endTime, serverTime, function(date, serverTime, timer){
                                    t=date;
                                    if(t[0]==0&&t[1]==0&&t[2]==0&&t[3]==0) {
                                        $('#' + key).text("已到期");
                                    }else{
                                        $('#' + key).text(t[0] + '天' + t[1] + '时' +  t[2] + '分' + t[3] + '秒');
                                    }
                                });
                                return html;
                            }
                    }}
                ,{field: 'state',title: '状态', width:90,templet: '#table-state'}
                ,{field: 'money', title: '金额', width:100,sort: true}
                ,{field: 'sum', title: '名额', width: 80,style:'color: #1E9FFF;'}
                ,{field: 'residue', title: '剩余', width: 80,style:'color: #1E9FFF;'}
                ,{field: 'applyNum', title: '申请人数', width: 100,style:'color: #1E9FFF;'}
                ,{field: 'require', title: '要求', width:200}
                ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
            ]],
            page: true //开启分页
            , limits: [2,5]  //一页选择显示3,5或10条数据
            , limit: 2 //一页显示6条数据
        });

        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.open({
                    type: 2
                    ,
                    title: "详细信息"
                    ,
                    skin :'layui-layer-lan'
                    ,
                    area: ['600px','750px']
                    ,
                    id: 'LAY-2' //设定一个id，防止重复弹出
                    ,
                    btnAlign: 'd'
                    ,
                    moveType: 0 //拖拽模式，0或者1
                    ,
                    fixed: false,
                    content: "student-detailscholarship.html",
                    shadeClose: true,
                    success: function(layero, index) {
                        var body = layer.getChildFrame('body', index);//获取iframe页的DOM
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
                        $.ajax({
                            type: "GET",
                            url: "/scholarship/scholarshipDetial",
                            dataType: "json",
                            data:{
                                "sid": data.sid
                            },
                            success: function (res) {
                                body.find('#profession').html(res.data.alumni.profession);
                                body.find('#name').html(res.data.alumni.name);
                                if(res.data.alumni.gender==1){
                                    body.find("#gender").html("男");
                                }else{
                                    body.find("#gender").html("女");
                                }
                                body.find('#graduate').html(res.data.alumni.graduate);
                                body.find('#department').html(res.data.alumni.department);
                                body.find('#major').html(res.data.alumni.department);
                                body.find('#phone').html(res.data.alumni.phone);
                                body.find('#mail').html(res.data.alumni.mail);
                                body.find('#politic').html(res.data.alumni.politic);
                                body.find('#introduction').html(res.data.alumni.introduction);
                                body.find('#sid').html(res.data.sid);
                                body.find('#sname').html(res.data.name);
                                if(res.data.state==1){
                                    body.find("#state").html(`<label  style="color: dodgerblue;">启用</label>`);
                                }else{
                                    body.find("#state").html(`<label  style="color: red;">禁用</label>`);
                                }
                                body.find('#money').html(res.data.money);
                                body.find('#sum').html(res.data.sum);
                                body.find('#residue').html(res.data.residue);
                                body.find('#applyNum').html(res.data.applyNum);
                                body.find('#startTime').html(res.data.startTime);
                                body.find('#endTime').html(res.data.endTime);
                                body.find('#require').html(res.data.require);
                                iframeWin.layui.table.render();
                            }
                        });
                    },
                })
            } else if(layEvent === 'apply') {
                var t;
                var endTime=new Date(data.endTime).getTime()
                    ,serverTime = new Date().getTime();
                util.countdown(endTime, serverTime, function(date, serverTime, timer){
                    t=date;
                });//计算剩余时间
                if(t[0]==0&&t[1]==0&&t[2]==0&&t[3]==0){
                    layer.alert('申请时间已结束!!!', {
                        skin: 'layui-layer-lan'
                        ,closeBtn: 0
                        ,anim: 0 //动画类型

                    });
                }else
                if(data.state==0){
                    layer.alert('该奖学金已被禁用无法申请!!!', {
                        skin: 'layui-layer-lan'
                        ,closeBtn: 0
                        ,anim: 0 //动画类型

                    });
                }else{
                    $.ajax({
                        type: "GET",
                        url: "/scholarshipApply/check",
                        dataType: "json",
                        data: {
                            "sid": data.sid
                        },
                        success: function (res) {
                            if(res.flag){
                                layer.open({
                                    type: 2
                                    ,
                                    title: "附加信息填写"
                                    ,
                                    skin :'layui-layer-lan'
                                    ,
                                    area: ['615px','750px']
                                    ,
                                    id: 'LAY-2' //设定一个id，防止重复弹出
                                    ,
                                    btnAlign: 'd'
                                    ,
                                    moveType: 0 //拖拽模式，0或者1
                                    ,
                                    fixed: false,
                                    content: "apply.html",
                                    shadeClose: true,
                                    success: function(layero, index) {
                                        var body = layer.getChildFrame('body', index);//获取iframe页的DOM
                                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
                                        body.find('#sid').val(data.sid);
                                    }
                                })
                            }else {
                                layer.alert(res.msg, {
                                    skin: 'layui-layer-lan'
                                    ,closeBtn: 0
                                    ,anim: 0 //动画类型

                                });
                            }
                        }
                    });
                }
            }
        });

        $(document).on('click','#searchBtn',function (data) {
            //获取文本框对象
            var search = $('#demoReload')
            //调用数据表格的重载
            table.reload('demo',{
                url:"/scholarship/selectScholarship",
                where:{
                    searchResult:search.val()//前端向后端传输的值
                },
                page:{
                    curr:1
                }
            });
        });

    });
</script>
</body>
</html>